<template>
  <div id="base">
     <div class="base">
	   <div>--------------------Vue的表单元素------------------------------</div>
	    <div class="login-wrap" v-show="showLogin">
            <h3>登录</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="username" v-on:blur="checkusername" v-on:focus="name"><span v-show="nameFlag" class="name-wrap">{{nameShow}}</span>
            <input type="password" placeholder="请输入密码" v-model="password" v-on:blur="checkpassword" v-on:focus="pword"><span v-show="pFlag" class="name-wrap">{{pShow}}</span>
            <button v-on:click="login">登录</button>
            <span v-on:click="ToRegister">没有账号？马上注册</span>
        </div>
		
		<div class="register-wrap" v-show="showRegister">
            <h3>注册</h3>
            <p v-show="showTishi">{{tishi}}</p>
            <input type="text" placeholder="请输入用户名" v-model="newUsername">
            <input type="password" placeholder="请输入密码" v-model="newPassword">
            <button v-on:click="register">注册</button>
            <span v-on:click="ToLogin">已有账号？马上登录</span>
        </div>
		
		
    </div>
  </div>
</template>
 
<script>
import {setCookie,getCookie} from '../assets/js/cookie.js';
export default {
  name: 'base',
  data(){//组件data必须是Function类型
  return {
  showLogin:true,
  showTishi:false,
  showRegister:false,
  tishi:'',
  username:'',
  password:'',
  newUsername:'',
  newPassword:'',
  nameFlag:false,
  pFlag:false,
  nameShow:'',
  pShow:''
  
  }
  },
  //计算属性
  computed:{
  // 仅读取，值只须为函数
  aDouble:function(){
  return this.b*2;
  },
  // 读取和设置
  aPlus:{
    get: function () {
      return this.b + 1
    },
	set: function (v) {
      this.b = v - 1
    }
                 }
  },
  mounted(){
  /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，不需登录*/
  console.log(getCookie('username'));
    if(getCookie('username')){
        this.$router.push('/vue')
    }
  },
  methods:{
	login:function(){
	if(this.username==''&&this.password==''){
	 alert("请输入用户名或密码");
	}else if(this.username!='admin'){
	  this.tishi = "该用户不存在";
      this.showTishi = true;
	}else if(this.username=='admin'&&this.password=='admin123'){
    this.tishi = "登录成功";
	this.showTishi = true;
	setCookie('username',this.username,1000*60);
	setTimeout(function(){
                      this.$router.push('/main')
                  }.bind(this),1000);
	  
	}else{
	this.tishi = "登录成功";
	this.showTishi = true;
	setCookie('username',this.username,1000*60);
	setTimeout(function(){
                      this.$router.push('/vue')
                  }.bind(this),1000);
	}
	},
	ToRegister:function(){
	this.showRegister=true;
	this.showLogin = false;
	},
	register:function(){
	if(this.username==''&&this.password==''){
	 alert("请输入用户名或密码");
	}
	
	},
	ToLogin:function(){
    this.showRegister=false;
	this.showLogin = true;
	},
	checkusername:function(){
	if(this.username!='admin'){
	this.nameFlag=true;
    this.nameShow = "该用户不存在"	;
	}
	},
	name:function(){
	this.nameFlag=false;
	this.nameShow = ""	;
	},
	checkpassword:function(){
	if(this.password==''){
    this.pFlag=true;
    this.pShow = "密码不能为空"	;
	}

	},
	pword:function(){
	    this.pFlag=false;
    this.pShow = ""	;
	
	}
  
  },
  watch:{// 监控b的变化，并自动执行下面的函数
  b:function(val,oldVal){
     console.log('val:' + val + ' - oldVal: ' + oldVal);
  
  }
  }
  
}
</script>
 
<style>
#test {
  width: 400px;
  height: 400px;
  margin: 40px auto;
}
.base{
float:left;

}

    .login-wrap{text-align:center;}
    input{display:block; width:250px; height:40px; line-height:40px; margin:0 auto; margin-bottom: 10px; outline:none; border:1px solid #888; padding:10px; box-sizing:border-box;}
    p{color:red;}
    button{display:block; width:250px; height:40px; line-height: 40px; margin:0 auto; border:none; background-color:#41b883; color:#fff; font-size:16px; margin-bottom:5px;}
    span{cursor:pointer;}
    span:hover{color:#41b883;}
	
	.name-wrap{
	float: right;
    margin-top: -40px;
    color: red;
	}
</style>